<template>
  <div class="moheader">
    <div class="moheader_uer">
      <div class="moheader_uer_logo">
        <img src="../../../../static/img/minlogo.png" alt />
        <!-- <i class="iconfont icon-denglu"></i>
        <span><router-link :to="{name:'personal'}" style="color:#000;">{{this.userInfo}}</router-link>欢迎访问心血管联盟网</span>-->
      </div>
      <i class="iconfont icon-fangdajing" id="moheader_uer_icon"></i>
      <!-- <el-input type="text" size="small" placeholder="请输入您想要的内容" v-model.trim="searchKey" @keyup.enter.native="searchss" id="el-input"></el-input> -->
      <input
        type="text"
        class="el-input"
        placeholder="请输入您想要的内容"
        v-model.trim="searchKey"
        @keyup.enter="searchss"
      />
    </div>
    <div class="moheader_nav">
      <!-- <span @click="display">
        <i class="iconfont icon-x homeListIcon" v-if="this.show" style="font-size:28px;top:4px;"></i>
        <i class="iconfont icon-list_icon homeListIcon" style="font-size:28px;top:4px;" v-else></i>
      </span>-->
      <div class="mosearch">
        <el-input
          type="text"
          size="small"
          placeholder="请输入您想要的内容"
          v-model.trim="searchKey"
          @keyup.enter.native="searchss"
        ></el-input>
        <span @click="searchss">
          <i class="iconfont icon-sousuo sousuo" @click="search"></i>
        </span>
      </div>
      <iframe
        src="../../../../static/syimg/logo2_hb 1.svg"
        style="
          display: block;
          width: 107px;
          height: 41px;
          left: 8px;
          border: none;
          position: relative;
        "
      ></iframe>
      <div class="coverLogo" @click="toMenu('/home')" v-show="!isShow"></div>
      <!-- <i class="iconfont icon-sousuo sousuo" @click="search"></i> -->
      <!-- <i class="iconfont icon-xiazai1 xiazai" @click="toMenu('/login')"></i> -->
      <!-- <i class="iconfont icon-xiazai1 xiazai" @click="personLo()"></i> -->
    </div>
    <transition name="fade">
      <div class="coverBg" v-show="show">
        <div class="cover"></div>
        <ul class="coverNAv">
          <li
            v-for="(item, index) in naviagation"
            :key="index"
            @click="closeList"
          >
            <router-link :to="{ path: item.url }">
              {{ item.name }}
              <i class="iconfont icon-youjiantou"></i>
            </router-link>
          </li>
          <li style="border-bottom: none">
            <span class="blogrollName">友情链接</span>
            <el-select size v-model="value" placeholder>
              <el-option
                v-for="item in options"
                :key="item.Id"
                :label="item.Title"
                :value="item.Sort"
                @click.native="toMenuB(item.Url)"
              ></el-option>
            </el-select>
          </li>
        </ul>
      </div>
    </transition>
  </div>
</template>

<script>
//juqery
import axios from "axios";
import searchFilter from "../../../assets/script/search-fliter";
export default {
  data() {
    return {
      searchKey: "",
      naviagation: [
        {
          name: "首页",
          url: "/home",
        },
        {
          name: "学术期刊",
          url: "/periodical",
        },
        {
          name: "学术论文",
          url: "/academic",
        },
        {
          name: "新媒体",
          url: "/media",
        },
        {
          name: "会议培训",
          url: "/meeting",
        },
        {
          name: "病例案例",
          url: "/disCase",
        },
      ],
      navi: "",
      value: "中国心血管杂志",
      options: [],
      show: false,
      isShow: false,
      userName: "",
      userInfo: "",
    };
  },
  methods: {
    display() {
      this.show = !this.show;
    },
    search() {
      this.isShow = !this.isShow;
    },
    closeList() {
      this.show = !this.show;
    },
    toMenu(url) {
      this.$uniRouter.push({
        path: url,
      });
    },
    toMenuB(url) {
      window.open(url);
    },
    searchss() {
      if (this.$route.meta.sciContribute) {
        this.$emit("search", this.searchKey);
        return;
      }
      this.$uniRouter.push({
        path: "/search",
        query: {
          whereName: this.searchKey,
        },
      });
    },
    getData() {
      axios
        .get("/api/Lm/GetBlogroll")
        .then((res) => {
          this.options = res.data.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    personLo() {
      let url = "";
      if (this.userName) {
        url = "/personal";
      } else {
        url = "/login";
      }
      this.$uniRouter.push({
        path: url,
      });
    },
    get() {
      // var exp = 60 * 60 * 24 * 10000;
      // var data = sessionStorage.getItem('userName');
      // var dataObj = data;
      // var dataTody = new Date().getTime()
      // var dataObjB = JSON.parse(dataObj);
      // if (dataTody - dataObjB.time>exp) {
      //   console.log('信息已过期');
      //   localStorage.clear();
      // }else{
      //   var dataObjDatatoJson = dataObjB.data
      //   this.userName = dataObjDatatoJson;
      //   if(!this.userName){
      //     this.userInfo = '';
      //   } else {
      //     this.userInfo = this.userName;
      //   }
      //   return dataObjDatatoJson;
      // }
    },
  },
  created() {
    this.getData();
    this.userName = sessionStorage.getItem("userName");
    if (!this.userName) {
      this.userInfo = "";
    } else {
      this.userInfo = this.userName;
    }
    this.get();
  },
};
</script>

<style lang="less" scoped>
.moheader {
  width: 100%;
  // height:385px;
  position: fixed;
  z-index: 999;
  top: 0;
  .moheader_uer {
    width: 100%;
    height: 45px;
    background: #fff;
    position: relative;
    .moheader_uer_logo {
      width: 13%;
      // height: 88%;
      margin-left: 3%;
      position: relative;
      top: 1%;
      display: inline-block;
      img {
        width: 100%;
        height: 100%;
      }
    }
    #moheader_uer_icon {
      position: absolute;
      top: 29%;
      color: #000;
      left: 21%;
      z-index: 9;
    }
    /deep/.el-input {
      width: 78% !important;
      height: 33px;
      position: absolute;
      top: 16%;
      border-radius: 25px !important;
      background: #f7f8fa;
      outline: none;
      border: none;
      padding-left: 34px;
      margin-left: 2%;
    }
  }
  .moheader_nav {
    display: none;
    width: 100%;
    height: 45px;
    margin: 0 auto;
    position: relative;
    // background: #fff;
    background: #003c80;
    .coverLogo {
      width: 107px;
      height: 41px;
      position: absolute;
      top: 0;
      left: 42px;
    }
    i {
      font-size: 19px;
      color: #fff;
      font-weight: bold;
      position: relative;
      left: 10px;
      top: 9px;
    }
    .mosearch {
      width: 60%;
      height: 32px;
      border: 1px solid #003c80;
      position: absolute;
      top: 7px;
      right: 3%;
      // /deep/.el-input{
      //   width:70%;
      //   height:100%;
      //   border:none;
      //   outline:none;
      //   font-size:14px;
      //   margin-left: 0%!important;
      //   position: relative;
      //   top: -1px;
      //   /deep/.el-input__inner{
      //     width:100%;
      //     height:100%;
      //     border:none;
      //     outline:none;
      //     padding-left:5px;
      //     font-size:14px;
      //     border-radius:0px!important;
      //   }
      // }
      span {
        display: inline-block;
        width: 30%;
        height: 100%;
        background: #003c80;
        text-align: center;
        line-height: 30px;
        position: absolute;
        right: 0;
        a {
          color: #fff;
          font-size: 15px;
        }
      }
    }
    .sousuo {
      position: absolute;
      left: 36%;
      top: 0 !important;
    }
    .xiazai {
      position: absolute;
      left: 91%;
    }
  }
}
.coverBg {
  width: 100%;
  height: 313px;
}
.cover {
  width: 100%;
  height: 100%;
  position: fixed;
  background: #000;
  opacity: 0.2;
  z-index: 999;
  top: 72px;
  // display:none;
}
.coverNAv {
  width: 100%;
  height: 313px;
  background: #003c80;
  position: fixed;
  // display: none;
  z-index: 999;
  top: 72px;
  .active {
    background: #fff;
    // border-top: 2px solid #003c80;
    a {
      color: #003c80;
      background: #fff;
    }
  }
  li {
    width: 97%;
    margin: 0 auto;
    height: 42px;
    line-height: 42px;
    border-bottom: 1px solid #9ac2eb;
    position: relative;
    a {
      display: inline-block;
      width: 100%;
      height: 100%;
      color: #f7f8fa;
      font-size: 15px;
      padding-left: 27px;
      i {
        color: #fff;
        position: absolute;
        right: 18px;
      }
    }
  }
  .blogrollName {
    color: #f7f8fa;
    font-size: 16px;
    padding-left: 27px;
    position: relative;
    top: 10px;
  }
  /deep/.el-select {
    width: 67%;
    background: transparent !important;
    top: 10px;
    right: 0;
    position: absolute;
    position: relative;
    top: -1px;
  }
}
@media screen and (min-width: 1010px) {
  .moheader {
    display: none;
  }
}
</style>
